<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>商务会员管理系统</title>
  <link rel="stylesheet" href="layui/css/layui.css">
  <script src="layui/layui.js" type="text/javascript"></script>
  <script type="text/javascript">
	let loginUser = localStorage.getItem('loginUser');
	if(!loginUser){
		layer.msg("您的登录信息已过期");
		window.location.href = 'login.html';
	}else{
		loginUser = JSON.parse(loginUser);
	}
	window.onload = function(){
		document.getElementById("user").innerHTML = loginUser.name;
		document.getElementById("username").innerHTML = loginUser.name;
		// document.getElementById("usertype").innerHTML = loginUser.userType.name;
	}
	
	let goOut = () => {
		if(window.confirm("确认退出吗?")){
			let loginUser = localStorage.getItem('loginUser');
			if(loginUser != null){
				localStorage.removeItem('loginUser');
				window.location.href = "login.html";
			}
		}
	}
  </script>
  <style type="text/css">
	.layui-layout-left{
		height: 60px;
		line-height: 60px;
	}
	.item-li{
		float: left;
	}
	.item{
		margin-right: 80px;
	}
	a{
		color: #fff;
		cursor: pointer;
	}
  </style>
</head>
<body>
	<div class="layui-layout layui-layout-admin">
	  <div class="layui-header">
		<div class="layui-logo layui-hide-xs layui-bg-black">Welcome</div>
		<!-- 头部区域（可配合layui 已有的水平导航） -->
		<ul class="layui-nav layui-layout-left">
		   <li class="layui-hide-xs item-li">
			   用户名:<span id="username" class="item"></span>
		   </li>
		   <li class="layui-hide-xs item-li">
			   用户类型:<span id="usertype" class="item"></span>
		   </li>
		   <li class="layui-hide-xs item-li">
			   <a href="javascript:void(0)" onclick="goOut()">退出</a>
		   </li>
		</ul>
		<ul class="layui-nav layui-layout-right">
		  <li class="layui-nav-item layui-hide layui-show-md-inline-block">
			<a href="javascript:;">
			  <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
			  <span id="user"></span>
			</a>
			<dl class="layui-nav-child">
			  <dd><a href="javascript:void(0)">设置</a></dd>
			  <dd><a href="javascript:void(0)" onclick="goOut()">退出</a></dd>
			</dl>
		  </li>
		</ul>
	  </div>
	  
	  <div class="layui-side layui-bg-black">
		<div class="layui-side-scroll">
		  <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		  <ul class="layui-nav layui-nav-tree" lay-filter="test">
			<li class="layui-nav-item layui-nav-itemed">
			  <a class="" href="javascript:;">系统管理</a>
			  <dl class="layui-nav-child">
				<dd><a href="updatePass.html">修改密码</a></dd>
				<dd><a href="userList.html">查看所有会员</a></dd>
			  </dl>
			</li>
		  </ul>
		</div>
	  </div>
	  
	  <div class="layui-body">
		<!-- 内容主体区域 -->
		<iframe src="userList.html" id="main" style="padding: 15px;width: 100%;height: 100%;box-sizing: border-box;border: none;">
			
			
		</iframe>
	  </div>
	  
	  <div class="layui-footer" style="text-align: center;">
		<!-- 底部固定区域 -->
		商务会员管理系统
	  </div>
	</div>
	<script src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function(){
		$(".layui-nav-child a").click(function(e){
			e.preventDefault();
			$("#main").attr('src',$(this).attr('href'));
		})
	})
	
	//JS 
	layui.use(['element', 'layer', 'util'], function(){
	  var element = layui.element
	  ,layer = layui.layer
	  ,util = layui.util,
	  element = layui.element;
	  
	  //头部事件
	  util.event('lay-header-event', {
		//左侧菜单事件
		menuLeft: function(othis){
		  layer.msg('展开左侧菜单的操作', {icon: 0});
		}
	  });
	});
	</script>
</body>
</html>
